import { onMounted } from 'vue';
type Options = {
  el: string;
};

type Return = {
  base64Url: string | null;
};
export default (option: Options): Promise<Return> => {
  return new Promise((resolve) => {
    onMounted(() => {
      // 定义 img 转 base64 方法
      const toBase64 = (el: HTMLImageElement) => {
        const canvas: HTMLCanvasElement = document.createElement('canvas'); // 在内存中创建一个画布
        const ctx = canvas.getContext('2d') as CanvasRenderingContext2D; // 获取了画布的 2D 渲染上下文，需要使用这个上下文来绘制图片。
        canvas.width = el.width;
        canvas.height = el.height; // 设置了画布的宽度和高度，使其与传入的图片元素的尺寸相同。
        // 使用 drawImage 方法将传入的图片绘制到画布上。第一个参数是要绘制的图片元素，后面的参数是绘制的位置和尺寸。
        ctx.drawImage(el, 0, 0, canvas.width, canvas.height);
        // 参数 'image/png' 表示输出的图像格式 其他：'image/jpeg'、'image/webp'
        return canvas.toDataURL('image/png');
      };
      const img: HTMLImageElement = document.querySelector(option.el) as HTMLImageElement;
      img.onload = (): void => {
        // 图片加载完成后执行的逻辑
        resolve({
          base64Url: toBase64(img)
        });
      };
    });
  });
};
